<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>乔俊辉</title>
	<script src="js/jq.js"></script>

	<script src="bootstrap-4.3.1/dist/js/bootstrap.js"></script>
	<script src="bootstrap-4.3.1/dist/js/bootstrap.bundle.js"></script>
	<link rel="stylesheet" type="text/css" href="bootstrap-4.3.1/dist/css/bootstrap.min.css" />

	<link rel="stylesheet" type="text/css" href="css/nav.css" />
	<link rel="stylesheet" type="text/css" href="css/index.css" />

</head>

<body>
	<nav class="fixed-top">
		<div class="logo"><img src="img/logo.png" /></div>
		<ul>
			<li><a href="index.html">首页</a></li>
			<li><a href="news.html">新闻咨询</a>
				<ul>
					<li><a href="news.html">最 新</a></li>
					<li><a href="news.html?type=hot">热 点</a></li>
					<li><a href="news.html?type=note">公 告</a></li>
					<li><a href="news.html?type=active">活 动</a></li>
				</ul>
			</li>
			<li><a href="goodsHandbook.html">游戏图鉴</a>
				<ul>
					<li><a href="goodsHandbook.html">物品图鉴</a></li>
					<li><a href="battleHandbook.html">武器图鉴</a></li>
					<li><a href="lifeHandbook.html">生物图鉴</a></li>
				</ul>
			</li>
			<li><a href="worldInfo.html">地图介绍</a>
				<ul>
					<li><a href="worldInfo.html">生存世界</a></li>
					<li><a href="worldInfo-e.html">下界世界</a></li>
					<li><a href="worldInfo-e.html">末地世界</a></li>
				</ul>
			</li>
			<li><a href="Strategy.html">游戏攻略</a>
			</li>
		</ul>
		<div class="right">
			<div class="button">
				<a href="login.html">
					<div class="logo" style="left: 18px;"></div>
					<h4>账号登录</h4>
				</a>
			</div>
			<div class="button2">
				<a href="">
					<div class="logo" style="background-position-y: -26px;"></div>
					<h4>下载游戏</h4>
				</a>
			</div>
		</div>
	</nav>

	<header>
		<div id="lbt" class="carousel slide" data-ride="carousel">
			<!-- 指示符 -->
			<ul class="carousel-indicators">
				<li data-target="#lbt" data-slide-to="0" class="active"></li>
				<li data-target="#lbt" data-slide-to="1"></li>
				<li data-target="#lbt" data-slide-to="2"></li>
			</ul>

			<!-- 轮播图片 -->
			<div class="carousel-inner">
				<div class="carousel-item active">
					<img src="img/index/bannerImg2.jpg">
					<div class="cont-h" style="margin-top: 0rem; margin-left:-5rem;">
						<img src="img/index/bannerImg2-font.png">
					</div>
				</div>
				<div class="carousel-item">
					<img src="img/index/bannerImg3.jpg">
					<div class="cont-h">
						<img src="img/index/bannerImg3-font.png">
					</div>
				</div>
				<div class="carousel-item">
					<img src="img/preIndexBG1.jpg">
					<div class="cont-h">
						<img src="img/PerIndex/PerIndexTitle.png">
					</div>
				</div>
			</div>

			<!-- 左右切换按钮 -->
			<a class="carousel-control-prev" href="#lbt" data-slide="prev">
				<span class="carousel-control-prev-icon"></span>
			</a>
			<a class="carousel-control-next" href="#lbt" data-slide="next">
				<span class="carousel-control-next-icon"></span>
			</a>

		</div>
	</header>

	<section>
		<div class="title">
			<h1>热点推荐</h1>
			<p>Hot Recommendation</p>
		</div>
		<div id="lbt-hot" class="carousel slide" data-ride="carousel">
			<!-- 轮播图片 -->
			<div class="carousel-inner">
				<div class="carousel-item active">
					<div class="minItem"><a href="">
							<img src="img/index/recommend3.jfif">
							<h2>末地介绍</h2>
						</a>
					</div>
					<div class="minItem"><a href="">
							<img src="img/index/recommend1.jfif">
							<h2>天安门计划</h2>
						</a>
					</div>
					<div class="minItem"><a href="">
							<img src="img/index/recommend2.jfif">
							<h2>生存世界地形介绍</h2>
						</a>
					</div>
					<div class="minItem"><a href="">
							<img src="img/index/recommend4.jfif">
							<h2>生存图鉴</h2>
						</a>
					</div>
				</div>
				<div class="carousel-item">
					<div class="minItem"><a href="">
							<img src="img/index/recommend5.jfif">
							<h2>攻略:丛林神庙</h2>
						</a>
					</div>
					<div class="minItem"><a href="">
							<img src="img/index/recommend6.jfif">
							<h2>教程:红石计算机</h2>
						</a>
					</div>
					<div class="minItem"><a href="">
							<img src="img/index/recommend7.jfif">
							<h2>我的世界：地球发布</h2>
						</a>
					</div>
					<div class="minItem"><a href="">
							<img src="img/index/recommend8.jfif">
							<h2>解说:建造我的王国</h2>
						</a>
					</div>
				</div>
				<div class="carousel-item">
					<div class="minItem"><a href="">
							<img src="img/index/recommend9.jfif">
							<h2>海底世界资料片</h2>
						</a>
					</div>
					<div class="minItem"><a href="">
							<img src="img/index/recommend10.jfif">
							<h2>教程:家园系统</h2>
						</a>
					</div>
					<div class="minItem"><a href="">
							<img src="img/index/recommend11.jfif">
							<h2>攻略:召唤祭坛</h2>
						</a>
					</div>
					<div class="minItem"><a href="">
							<img src="img/index/recommend12.jfif">
							<h2>攻略:史莱姆农场</h2>
						</a>
					</div>
				</div>
			</div>

			<!-- 左右切换按钮 -->
			<a class="carousel-control-prev" href="#lbt-hot" data-slide="prev">
				<span class="carousel-control-prev-icon"></span>
			</a>
			<a class="carousel-control-next" href="#lbt-hot" data-slide="next">
				<span class="carousel-control-next-icon"></span>
			</a>

		</div>
		<div class="btn" style="text-align: center;">
			<a href="news.html">查看更多</a>
		</div>
	</section>

	<footer>
		<div class="footer-left">
			<a href=""></a>
		</div>
		<div class="footer-rigt">
			<p>
			<ul>
				<li><a href="">腾讯娱乐</a></li>|
				<li><a href="">服务条款</a></li>|
				<li><a href="">腾讯游戏隐私保护指引</a></li>|
				<li><a href="">腾讯游戏招聘</a></li>|
				<li><a href="">腾讯游戏客服</a></li>|
				<li><a href="">腾讯游戏地图</a></li>|
				<li><a href="">商务合作</a></li>|
				<li><a href="">腾讯网</a></li>|
				<li><a href="">网站导航</a></li>
			</ul>
			</p><br>
			<p>腾讯公司版权所有</p>
			<p>COPYRIGHT © 1998 - 2023 TENCENT. ALL RIGHTS RESERVED.</p>
			<p>粤网文[2017]6138-1456号 |（总）网出证（粤）字第057号</p>
			<p>文网游进字[2016]0083号 | 新广出审[2016]783号 | 出版物号：ISBN 978-7-89988-706-6 | 全国文化市场统一举报电话：12318</p>
		</div>
	</footer>
</body>

<script>
	//nav
	var len;
	$("nav>ul>li").hover(function () {
		var height = $(window).scrollTop();
		len = $(this).children("ul").children("li").length;
		if (len == 0) {
			return
		}
		$(this).children("ul").css("transition", "all " + len * 0.15 + "s")
		$(this).children("ul").css("height", (len * 5) + "rem");
		if (height < 364) {
			$(".cont-h").css("transition", "all " + len * 0.15 + "s")
			$(".cont-h").css("padding-top", (len * 5 + height / 20) + "rem");
		}
	}, function () {
		$(this).children("ul").css("height", "0px");
		$(".cont-h").css("padding-top", "0rem");
	})
</script>

</html>